<!-- Cards with media area -->
<mat-card class="example-card" appearance="outlined">
  <mat-card-header>
    <mat-card-title-group>
      <mat-card-title>Shiba Inu</mat-card-title>
      <mat-card-subtitle>Small</mat-card-subtitle>
      <img mat-card-sm-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
    </mat-card-title-group>
  </mat-card-header>
  <mat-card-content>
    {{longText}}
  </mat-card-content>
</mat-card>

<mat-card class="example-card" appearance="outlined">
  <mat-card-header>
    <mat-card-title-group>
      <mat-card-title>Shiba Inu</mat-card-title>
      <mat-card-subtitle>Medium</mat-card-subtitle>
      <img mat-card-md-image src="https://material.angular.io/assets/img/examples/shiba2.jpg"  alt="Image of a Shiba Inu">
    </mat-card-title-group>
  </mat-card-header>
  <mat-card-content>
    {{longText}}
  </mat-card-content>
</mat-card>

<mat-card class="example-card" appearance="outlined">
  <mat-card-header>
    <mat-card-title-group>
      <mat-card-title>Shiba Inu</mat-card-title>
      <mat-card-subtitle>Large</mat-card-subtitle>
      <img mat-card-lg-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
    </mat-card-title-group>
  </mat-card-header>
  <mat-card-content>
    {{longText}}
  </mat-card-content>
</mat-card>

<mat-card class="example-card" appearance="outlined">
  <mat-card-header>
    <mat-card-title-group>
      <mat-card-title>Shiba Inu</mat-card-title>
      <mat-card-subtitle>Extra large</mat-card-subtitle>
      <img mat-card-xl-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
    </mat-card-title-group>
  </mat-card-header>
  <mat-card-content>
    {{longText}}
  </mat-card-content>
</mat-card>
